<template>
    <div class="home-content oG_">
        <!--二级 图片导航 -->
        <div class="xm-tomatoes c_B" v-if="secondCategoryList?.length">
            <div class="cate-wrap c_B">
                <div class="cate-box c_B" v-for="item in secondCategoryList" @click="clickImage(item.link)">
                    <div class="cate-pic c_B">
                        <img class="c_B" :src="item.img" alt="">
                    </div>
                    <p class="cate-txt c_B">{{ item.name }}</p>
                </div>
            </div>
        </div>
        <!-- 喜马拉雅  广告 -->
        <a to="###" class="init-code schema-link">
            <img class="amid-banner oG_" src="//imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png"
                alt="">
        </a>
    </div>
    <slot :moduleRankDatas="moduleRankDatas"></slot>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { moduleRankDatas, secondCategoryListModel, SecondCategoryResponseDataData } from '@/api/audioVideo/model/youshengshuModel';
import { getSecondCategoeyListApi } from '@/api/audioVideo/youshengshu';
import router from '@/router';
export default defineComponent({
    name: 'SecondCategory'
})
</script>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from "vue-router"
// 创建路由实例
const router = useRouter()
const route = useRoute()
// 请求二级分类  传递的  模块关键字
// const moduleKey = ref<string>("")
// 二级分类导航列表
const secondCategoryList = ref<secondCategoryListModel>([])

// 模块对应的数据列表
const moduleRankDatas = ref<moduleRankDatas>([])

// 获取二级分类列表
const getSecondCategoryList = async () => {
    let result
    // result = await getSecondCategoeyListApi(route.params.moduleKey as string)
    // 当路由的params参数为空时，实际一级、二级 渲染的是  params为tuijian的数据
    if (route.params.moduleKey) {
        console.log(route.params.moduleKey, "route.params.moduleKey")
        result = await getSecondCategoeyListApi(route.params.moduleKey as string)
    } else {
        result = await getSecondCategoeyListApi('tuijian')
    }

    // secondCategoryList.value = result.data.data.moduleContent.tomatoes
    secondCategoryList.value = (result as SecondCategoryResponseDataData).moduleContent.tomatoes
    moduleRankDatas.value = (result as SecondCategoryResponseDataData).moduleContent.moduleRankDatas
}


// 点击二级导航
const clickImage = (linkTo: string) => {
    console.log(linkTo, "linkTo 跳转到")
    router.push({
        path: linkTo
    })

}

// 监听动态路由的改变，每次params参数改变都重新请求
watch(route, () => {
    getSecondCategoryList()

})

onMounted(() => {
    getSecondCategoryList()
})
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

// 二级导航 图片导航
.home-content {
    &.oG_ {
        overflow: hidden;
        // padding-top: 85px;
    }

    // 图片导航分类
    .xm-tomatoes {
        &.c_B {
            margin-top: 15px;
        }

        .cate-wrap {
            &.c_B {
                width: 308px;
                margin: 0 auto;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                text-align: center;

                .cate-box {
                    &.c_B {
                        -webkit-box-flex: 1;
                        -ms-flex: 1;
                        flex: 1;
                    }

                    .cate-pic {
                        &.c_B {
                            width: 34px;
                            height: 34px;
                            display: inline-block;
                        }

                        img.c_B {
                            width: 100%;
                            height: 100%;
                            border-radius: 100%;
                        }

                        img {
                            max-width: 100%;
                            border: none;
                            font-size: 10px;
                        }
                    }

                    .cate-txt.c_B {
                        font-size: 12px;
                        color: #666;
                        text-align: center;
                        height: 17px;
                        line-height: 17px;
                    }
                }

                a {
                    color: #7e8c8d;
                    text-decoration: none;
                    -webkit-backface-visibility: hidden;
                    border: none;
                    outline: 0;
                }
            }

            .cate-wrap .cate-box.c_B {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
        }
    }

    // 喜马拉雅 广告
    .schema-link {
        position: relative;

        .amid-banner.oG_ {
            margin: 18px 0 8px 0;
            overflow: hidden;
        }

        img {
            max-width: 100%;
            border: none;
            font-size: 10px;
        }
    }
}
</style>